<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- Data Tables -->
    <link href="../../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="../../css/plugins/dataTables/buttons.dataTables.min.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <!-- orgchart.css -->
    <link rel="stylesheet" href="../../js/plugins/orgchart/css/jquery.orgchart.css">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
    .orgchart .node .title {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
    }

    .aside {
        padding: 53px 0;
        margin-right: 20px;
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }

    .aside1 {
        background-color: #07cdae;
    }

    .aside2 {
        background-color: #fe7096;
    }

    .aside3 {
        background-color: #047edf;
    }

    .asideList1,
    .asideList2,
    .asideList3 {

        color: #666;
        margin-bottom: 40px;
        background-color: #caf8e6;
        border: 1px solid #33fdff
    }

    .asideList1 .col-sm-2 {
        padding: 0 5px;
        margin-bottom: 12px;
    }

    .asideList1 .lableText {
        cursor: pointer;
    }

    .warming-danger,
    .warming-primary,
    .warming-danger {
        display: inline-block;
        /*vertical-align:-20%;*/

    }



    .listContent1 {
        padding: 20px;
    }


    #orgchart .modal-header {
        /*font-size: 20px;*/
        /*border-bottom: 1px solid #009999;*/
    }


    /* orgcharts */
    .orgchart {
        display: block;
    }

    /* 鼠标移动时的效果 */
    .orgchart .node:hover {
        background-color: #ffffff;
        transition: .5s;
        cursor: default;
        z-index: 20;
    }

    .close {
        font-size: 34px;
    }

    /* 鼠标点击时的效果 */

    .orgchart {
        padding-top: 0;
    }

    .orgchart .node.focused {
        background-color: #ffffff;
    }

    /* 去掉手型 */
    .orgchart .node .horizontalEdge {
        width: 0px;
        height: calc(100% - 10px);
        height: -webkit-calc(100% - 10px);
        height: -moz-calc(100% - 10px);
        top: 0px;
    }

    /* 圆角 */
    .orgchart .node .title {
        border-radius: 4px 4px 0 0;
    }

    /* 去掉上下左右的扩大缩小箭头 */
    group:before,
    .fa-users:before {
        content: none;
    }

    .fa-chevron-up::before {
        content: none;
    }

    .fa-chevron-down::before {
        content: none;
    }

    .fa-chevron-right::before {
        content: none;
    }

    .fa-chevron-left::before {
        content: none;
    }

    /* 模态框样式 */
    .reduce {
        z-index: 2030 !important;
    }

    .modal-header {
        padding: 0;
        border-bottom: none;
    }

    /* table表格 */
    .ibox-content {
        height: 300px;
        overflow-y: auto;
    }

    table tbody {
        text-align: center;
    }

    li {
        list-style: none;
        padding: 10px 0 10px;
    }

    .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:hover,
    .nav-tabs>li.active>a:focus {
        border-bottom: #ffffff;
    }

    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12 ">
                <div class="col-sm-12 asideList1 pd0">
                    <div class="col-sm-1 aside aside1">
                        <div>业务</div>
                        <div>系统</div>
                    </div>
                    <div class="listContent1 ">
                        <!--<div class="col-sm-1">-->
                        <!--<span class="lable">324</span>-->
                        <!--<span class="lableText">达到是</span>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 ">
                <div class="col-sm-12 asideList1 pd0">
                    <div class="col-sm-1 aside aside2">
                        <div>IT基础</div>
                        <div>支持系统</div>
                    </div>
                    <div class="listContent1 ">
                        <!--<div class="col-sm-1">-->
                        <!--<span class="lable">324</span>-->
                        <!--<span class="lableText">达到是</span>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 ">
                <div class="col-sm-12 asideList1 pd0">
                    <div class="col-sm-1 aside aside3">
                        <div>公共支</div>
                        <div>持系统</div>
                    </div>
                    <div class="listContent1 ">
                        <!--<div class="col-sm-1">-->
                        <!--<span class="lable">324</span>-->
                        <!--<span class="lableText">达到是</span>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框：orgcharts-->
    <div class="modal inmodal fade" id="orgchart" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" style=" width: 93%; ">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                </div>
                <div id="chart-container"></div>
            </div>
        </div>
    </div>
    <!-- 模态框：tabChange-->
    <div class="modal inmodal fade" id="tabChange" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#jcxx" data-toggle="tab">基础信息</a></li>
                        <li><a href="#xnxx" data-toggle="tab">性能信息</a></li>
                        <li><a href="#gjxx" data-toggle="tab">告警信息</a></li>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                        </button>
                    </ul>
                </div>
                <div class="ibox-content">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="jcxx">
                            <table class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>
                                    <tr>
                                        <th>设备基本配置</th>
                                        <th>信息</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>主机</td>
                                        <td class="hostName">DB-1</td>
                                    </tr>
                                    <tr>
                                        <td>IP地址</td>
                                        <td class="config">192.168.1.1</td>
                                    </tr>
                                    <tr>
                                        <td>配置</td>
                                        <td class="hostName">2C4G500G</td>
                                    </tr>
                                    <tr>
                                        <td>是否是虚拟机</td>
                                        <td class="isVm">是</td>
                                    </tr>
                                    <tr>
                                        <td>位置信息</td>
                                        <td class="addressInfo">VC2上集群cluster-1上的虚拟机</td>
                                    </tr>
                                    <tr>
                                        <td>管理信息</td>
                                        <td class="managerInfo">所有者五名</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="xnxx">
                            <table class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>
                                    <tr>
                                        <th>设备基本配置</th>
                                        <th>信息</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>CPU利用率</td>
                                        <td class="cpu">89%</td>
                                    </tr>
                                    <tr>
                                        <td>内存利用率</td>
                                        <td class="memory">90%</td>
                                    </tr>
                                    <tr>
                                        <td>磁盘利用率</td>
                                        <td class="disk">91%</td>
                                    </tr>
                                    <tr>
                                        <td>其他相关</td>
                                        <td class="other">88%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="gjxx">
                            <ul>
                                <li>1.2019年2月20日，CPU利用率超过80%，产生重要告警。</li>
                                <li>2.2019年2月24日，CPU利用率超过84%，产生重要告警。</li>
                                <li>3.2019年2月25日，CPU利用率超过85%，产生重要告警。</li>
                                <li>4.2019年2月27日，CPU利用率超过87%，产生重要告警。</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <!-- orgchart.js -->
    <script src="../../js/plugins/orgchart/js/jquery.orgchart.js"></script>
    <!-- Data Tables -->
    <script src="../../js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="../../js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script type="text/javascript">
    $(function() {



        // -----------------------------------
        // 假数据
        // 0红 1绿 2黄
        var List1 = [{
                "id": "1",
                "lable": '0',
                "lableText": '财务报表系统',
            },
            {
                "id": "1",
                "lable": '1',
                "lableText": '附重组系统',
            },
            {
                "id": "1",
                "lable": '2',
                "lableText": '管理会计系统',
            },
            {
                "id": "1",
                "lable": '2',
                "lableText": '集团合并报表',
            },
            {
                "id": "1",
                "lable": '1',
                "lableText": '集团网站',
            },
            {
                "id": "1",
                "lable": '1',
                "lableText": '金融工具',
            },
            {
                "id": "1",
                "lable": '1',
                "lableText": '工具分类系统',
            },
            {
                "id": "1",
                "lable": '1',
                "lableText": '内部评级系统',
            },
            {
                "id": "1",
                "lable": '1',
                "lableText": '网络办公',
            }, {
                "id": "1",
                "lable": '1',
                "lableText": '协同办',
            }, {
                "id": "1",
                "lable": '1',
                "lableText": '邮件系统',
            }, {
                "id": "1",
                "lable": '1',
                "lableText": '业务审核系统',
            },
            {
                "id": "1",
                "lable": '1',
                "lableText": '资金才会平台',
            },
            {
                "id": "1",
                "lable": '1',
                "lableText": '资金才会平台',
            }
        ]

        var listHtml1 = List1.map(function(item, i) {
            // 0红 1绿 2黄
            if (item.lable == 0) {
                var lable = 'warming-danger'
            } else if (item.lable == 1) {
                var lable = 'warming-primary'
            } else if (item.lable == 2) {
                var lable = 'warming-warming'
            }
            return [
                ' <div class="col-sm-2">\n' +
                ' <span class=' + lable + '></span>\n' +
                ' <span class="lableText">' + item.lableText + '</span>\n' +
                '                    </div>'
            ].join('')
        }).join('')

        $('.asideList1').append(listHtml1)




        // 拓扑图
        var data = {
            'name': '财政报表系统拟化',
            'children': [{
                    'name': '数据库',
                    'id': '10',
                    'children': [{
                        'name': 'DB-1',
                        'children': [{
                                'name': '主机名',
                                'title': 'test-1'
                            },
                            {
                                'name': 'IP',
                                'id': '20',
                                'title': '192.168.1.0'
                            },
                        ]
                    }]
                },
                {
                    'name': '中间件',
                    'id': '20',
                    'children': [{
                        'name': 'WEBLOGIC:1',
                        'children': [{
                                'name': '主机名',
                                'title': 'test-1'
                            },
                            {
                                'name': 'IP',
                                'title': '192.168.1.0'
                            },
                        ]
                    }]
                },
                {
                    'name': '页面软件',
                    'children': [{
                            'name': 'TOMCAT-1',
                            'children': [{
                                    'name': '主机名',
                                    'id': '10',
                                    'title': 'test-1'
                                },
                                {
                                    'name': 'IP',
                                    'title': '192.168.1.0'
                                },
                            ]
                        },
                        {
                            'name': 'TOMCAT-2',
                            'id': '10',
                            'children': [{
                                    'name': '主机名',
                                    'title': 'test-1'
                                },
                                {
                                    'name': 'IP',
                                    'title': '192.168.1.0'
                                },
                            ]
                        }
                    ]
                }
            ]
        }



        $(".asideList1").on("click", ".lableText", function(event) {
            var node_active2 = $('#chart-container').find('.node')

            for (var i = 0; i < node_active2.length; i++) {
                if (node_active2[i].id == '10') {
                    var active = $('#chart-container').find('.node')[i]
                    $(active).children('.title').addClass('org0')
                    $(active).children('.content').addClass('bdOrg0')
                    // console.log(active)
                }

                if (node_active2[i].id == '20') {
                    var active = $('#chart-container').find('.node')[i]
                    $(active).children('.title').addClass('org1')
                    $(active).children('.content').addClass('bdOrg1')
                    // console.log(active)
                }


            }





            // if (THIS == 10) {
            //     $(this).addClass('red')
            // }


            $('#orgchart').modal("show");
        })


        // $("#chart-container").html('')
        $('#chart-container').orgchart({
            'data': data, // 数据
            'visibleLevel': 999, // 默认展开几级
            'zoom': true, // 通过鼠标滚轮放大或缩放OrgChart，默认false
            'pan': true, // 鼠标拖动OrgChart，默认false
            'direction': 't2b', // 方向，默认t2b，T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
            'nodeTitle': 'name', // 将数据源的一个属性设置为OrgChart节点标题段的文本内容
            'nodeContent': 'title', // 将数据源的一个属性设置为OrgChart节点的内容部分的文本内容
        });



        $('#chart-container').find('.node').on('click', function() {
            // console.log($(this)[0].id)


            $('#orgchart').addClass("reduce");
            $('#tabChange').modal("show");
        });




        // 关闭第二层模态框时移除第一层模态框样式
        $('#tabChange').on('hide.bs.modal', function() {
            $('#orgchart').removeClass("reduce");
        });

        // ----------------------真数据----------------



        // List1
        // $.ajax({
        //     url: getUrl() + '/app/initAppInfoO',
        //     type: 'GET',
        //     // dataType: 'jsonp', // 后端跨域才开启，模拟假数据注销掉
        //     success: function(response) {
        //         // var response = JSON.parse(response)   后端解决跨域和前端模拟假数据的时候都不需要格式化
        //         console.log(response)
        //         var List1 = response
        //         var listHtml1 = List1.map(function(item, i) {
        //             // 0红 1绿 2黄
        //             if (item.lable == 0) {
        //                 var lable = 'warming-danger'
        //             } else if (item.lable == 1) {
        //                 var lable = 'warming-primary'
        //             } else if (item.lable == 2) {
        //                 var lable = 'warming-warming'
        //             }
        //             return [
        //                 ' <div class="col-sm-2">\n' +
        //                 ' <span class=' + lable + ' ></span>\n' +
        //                 ' <span class="lableText" ' + 'data-id=' + item.id + '>' + item.lableText + '</span>\n' +
        //                 '                    </div>'
        //             ].join('')
        //         }).join('')

        //         $('.listContent1 ').append(listHtml1)
        //     }
        // })

        // // 显示orgcharts模态框
        // $(".asideList1").on("click", ".lableText", function(event) {
        //     $('#orgchart').modal("show");
        //     console.log($(this).attr('data-id'))
        //     var id = $(this).attr('data-id')
        //     $.ajax({
        //         url: getUrl() + '/app/initAppTuoP?id=' + id,
        //         type: 'GET',
        //         // dataType: 'jsonp', // 后端跨域才开启，模拟假数据注销掉
        //         success: function(response) {
        //             console.log(response)
        //             $("#chart-container").html('')
        //             $('#chart-container').orgchart({
        //                 'data': response, // 数据
        //                 'visibleLevel': 999, // 默认展开几级
        //                 'zoom': false, // 通过鼠标滚轮放大或缩放OrgChart，默认false
        //                 'pan': true, // 鼠标拖动OrgChart，默认false
        //                 'direction': 't2b', // 方向，默认t2b，T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
        //                 'nodeTitle': 'name', // 将数据源的一个属性设置为OrgChart节点标题段的文本内容
        //                 'nodeContent': 'title', // 将数据源的一个属性设置为OrgChart节点的内容部分的文本内容
        //             });
        //         },
        //         complete: function() {
        //             // 获取注释
        //             $.ajax({
        //                 url: getUrl() + '/app/initAppTuoContent?id=' + id,
        //                 type: 'GET',
        //                 success: function(response) {

        //                     $("#orgchart .modal-header").html(response.name)

        //                     $(".orgchart").append('<div>负责人：' + response.people + '</div> <br /><div>系统：' + response.os + '</div> <br />')
        //                 }
        //             })

        //             // 点击每个标签topo
        //             $('#chart-container').find('.node').on('click', function() {
        //                 // 打开第二层模态框时给第一层模态框添加样式
        //                 // 基础信息
        //                 var id = $(this).attr('id');
        //                 $.ajax({
        //                     url: getUrl() + '/app/initAppTuoBaseInfo?id=' + id,
        //                     type: 'GET',
        //                     success: function(response) {
        //                         $(".hostName").html(response.hostName)
        //                         $(".ip").html(response.ip)
        //                         $(".config").html(response.config)
        //                         $(".isVm").html(response.isVm)
        //                         $(".addressInfo").html(response.addressInfo)
        //                         $(".managerInfo").html(response.managerInfo)
        //                     }
        //                 })
        //                 // 性能信息
        //                 $.ajax({
        //                     url: getUrl() + '/app/initAppTuoConfigInfo?id=' + id,
        //                     type: 'GET',
        //                     success: function(response) {
        //                         $(".cpu").html(response.cpu + '%')
        //                         $(".memory").html(response.memory + '%')
        //                         $(".disk").html(response.disk + '%')
        //                         $(".other").html(response.other + '%')
        //                     }
        //                 })

        //                 // 告警信息
        //                 $.ajax({
        //                     url: getUrl() + '/app/initAppTuoAlarm?id=' + id,
        //                     type: 'GET',
        //                     success: function(response) {
        //                         var listHtml = response.map(function(item, i) {
        //                             return [
        //                                 '<li>' + item + '</li>'
        //                             ].join('')
        //                         }).join('')
        //                         $('#gjxx ul').append(listHtml)
        //                     }
        //                 })


        //                 $('#orgchart').addClass("reduce");
        //                 $('#tabChange').modal("show");
        //             });

        //             // 关闭第二层模态框时移除第一层模态框样式
        //             $('#tabChange').on('hide.bs.modal', function() {
        //                 $('#orgchart').removeClass("reduce");
        //             });

        //         }
        //     })
        // })






    })
    </script>
</body>

</html>